{% block sw_condition_and_container %}
<div
    class="sw-condition-and-container"
    :class="containerRowClass"
>
    {% block sw_condition_and_container_children %}
    <template
        v-for="(child, index) in condition[childAssociationField]"
        :key="index"
    >
        <div
            v-if="index > 0"
            class="condition-content__spacer--and"
        >
            {{ $tc('global.sw-condition.condition.and') }}
        </div>

        <sw-condition-tree-node
            :parent-condition="condition"
            :condition="child"
            :disabled="disabled || undefined"
            :level="level + 1"
        />
    </template>
    {% endblock %}

    {% block sw_condition_and_container_actions %}
    <div class="sw-condition-and-container__actions">
        <mt-button
            v-tooltip.bottom="getNoPermissionsTooltip('product_stream.editor')"
            ghost
            size="small"
            class="sw-condition-and-container__actions--and"
            :disabled="disabled"
            variant="secondary"
            @click="onAddPlaceholder"
        >
            {{ $tc('global.sw-condition.condition.AddAndCondition') }}
        </mt-button>

        <mt-button
            v-tooltip.bottom="getNoPermissionsTooltip('product_stream.editor')"
            ghost
            size="small"
            class="sw-condition-and-container__actions--sub"
            :disabled="disabled"
            variant="secondary"
            @click="onAddOrContainer"
        >
            {{ $tc('global.sw-condition.condition.AddSubCondition') }}
        </mt-button>

        <mt-button
            v-tooltip.bottom="getNoPermissionsTooltip('product_stream.editor')"
            size="small"
            class="sw-condition-and-container__actions--delete"
            :disabled="disabled"
            variant="secondary"
            @click="onDeleteAll"
        >
            {{ $tc('global.sw-condition.condition.deleteConditions') }}
        </mt-button>
    </div>
    {% endblock %}
</div>
{% endblock %}
